
<style>
.home .home-top{
  padding: 0px 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100px;
}
.home .home-top .home-top-item{
    width:23%;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px rgb(158, 158, 158);
    line-height: 70px;
    text-align: center;
}
.home .home-top .home-top-item img{
  width: 50px;
  height: 50px;
}
.home .home-top .home-top-item .item-picture{
  float: left;
  padding-top: 25px;
  padding-left: 25px;
}
.home .home-top .home-top-item .item-font{
  float: right ;
  font-size: 20px;
  padding-right: 25px;
  color: #777;
  margin: 0px;
}
.home .home-top .home-top-item .item-font p{
  height: 20px;
  margin-bottom: 15px;
}
.home-bottom{
  margin: 30px 30px;
  
  display: flex;
  justify-content: space-between;
}
.home-bottom .home-botttom-item{
  height: 450px;
  width: 32%;
  border: 1px solid pink;
}
.home-bottom .home-botttom-item .item-topPic{
  height: 120px;
  width: 100%;
  border: 1px solid yellow;
}
.home-bottom .home-botttom-item .item-topPic img{
  height: 120px;
  width: 100%;
}

.home-bottom .home-botttom-item .table{
  text-align: center;
  color: #777;
  border: none;
  font-size: 14px;
  cursor: pointer;
}
.home-bottom .home-botttom-item table{
  margin: 0 auto;
}
.home-bottom .home-botttom-item table tbody{
  text-align: center;
}
.home-bottom .home-botttom-item table tr td{
  text-align: center;
  border: none;
}


</style>






<div class="home">
    <div class="home-top">
      <div class="home-top-item">
        <div class="item-picture"><img src="./images/1.png" alt=""></div>
        <div class="item-font">
          <p>校园新闻</p>
          <p>20</p>
        </div>
      </div>
      <div class="home-top-item">
        <div class="item-picture"><img src="./images/3.png" alt=""></div>
        <div class="item-font">
          <p>通知公告</p>
          <p>20</p>
        </div>
      </div>
      <div class="home-top-item">
        <div class="item-picture"><img src="./images/2.png" alt=""></div>
        <div class="item-font">
          <p>学术新闻</p>
          <p>30</p>
        </div>
      </div>
      <div class="home-top-item">
        <div class="item-picture"><img src="./images/4.png" alt=""></div>
        <div class="item-font">
          <p>媒体聚焦</p>
          <p>84</p>
        </div>
      </div>
    </div>
    <div class="home-bottom">
      <div class="home-botttom-item">
        <div class="item-topPic"><img src="./images/11.jpg" alt=""></div>
        <div class="table">
          <table id="schoolNew">
            <thead>校园新闻</thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
      
      <div class="home-botttom-item">
        <div class="item-topPic"><img src="./images/22.jpg" alt=""></div>
        <div class="table">
        <table>
          <thead>通知公告</thead>
          <tbody>
            <tr>
              <td>暂无新闻</d>
            </tr>
          </tbody>
        </table>
      </div>
      </div>
      
      <div class="home-botttom-item">
        <div class="item-topPic"><img src="./images/33.jpg" alt=""></div>
          <div class="table">
            <table>
              <thead>学术新闻</thead>
              <tbody>
                <tr>
                  <td>暂无新闻</d>
                </tr>
              </tbody>
            </table>
        </div>
      </div>
      
    </div>
  
</div>




<script>
        myAjax.get(api.ARTICLE_FINDALL).then((res)=>{
      //清空节点
      $("#schoolNew tbody").empty();
      console.log(res)
      
      let arr=res.data;
      if(arr.length>0){
        arr.forEach((item,index)=>{
          $("#schoolNew tbody").append($(`
          <tr>
            <td>${item.title}</td>
        </tr>`))
        })
      }
    })
 
</script>